<template>
  <el-form ref="formRef" :model="formModel" :rules="rules" label-width="120px" class="form" label-position="right" status-icon>
    <el-form-item label="提现申请人:" class="form-item">
      {{ bankInfo.dispatcherName }}
    </el-form-item>
    <el-form-item label="收款账户:" class="form-item">
      <div>开户行：{{ bankInfo.openBank }}</div>
      <div>银行卡号：{{ bankInfo.bankCardNo }}</div>
      <div>开户姓名：{{ bankInfo.bankName }}</div>
    </el-form-item>
    <el-form-item label="申请金额:" class="form-item">{{ formModel.money }}元</el-form-item>
    <el-form-item label="扣款金额:">
      <el-input v-model.trim="formModel.deductionsMoney" placeholder="请输入扣款金额" class="form-select">
        <template slot="append">元</template>
      </el-input>
      <span class="input-info">* 微信手续费默认扣除千分之6，最低1元钱</span>
    </el-form-item>
    <el-form-item label="实际打款金额:" class="form-item">{{ actMoney }}元</el-form-item>
    <el-form-item label="扣款说明:">
      <el-input
        type="textarea"
        :rows="4"
        maxlength="100"
        show-word-limit
        placeholder="请输入扣款说明"
        v-model="formModel.deductionsRemark"
      ></el-input>
    </el-form-item>
    <el-form-item label="审核状态:" prop="status">
      <query-dict
        :dict-list="auditWithdrawList"
        class="select-item"
        showType="radio"
        placeholder="审核状态"
        :value.sync="formModel.status"
      ></query-dict>
    </el-form-item>
    <el-form-item label="审核备注:" :prop="formModel.status === 1 ? 'auditRemark' : ''">
      <el-input type="textarea" :rows="4" maxlength="100" show-word-limit placeholder="请输入审核备注" v-model="formModel.auditRemark"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import MixinForm from 'mixins/form'
import dictObj from '@/store/dictData'

export default {
  mixins: [MixinForm],
  props: {
    initData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      bankInfo: {},
      auditWithdrawList: dictObj.auditWithdrawList,
      rules: {
        auditRemark: [{ required: true, message: '审核备注不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '请选择审核状态', trigger: 'change' }]
      }
    }
  },
  computed: {
    formModel: {
      get() {
        return this.initData
      },
      set(val) {
        this.$emit('update:init-data', val)
      }
    },
    actMoney() {
      let { money, deductionsMoney } = this.formModel
      money = money.replace(',', '') * 100
      const wxMoney = (deductionsMoney ? money - parseInt(deductionsMoney * 100) : money) * 0.006
      const curMoney = deductionsMoney ? money - parseInt(deductionsMoney * 100) : money
      return ((curMoney - (wxMoney > 100 ? wxMoney : 100)) / 100).toFixed(2)
    },
    wxMoney() {
      let { money, deductionsMoney } = this.formModel
      money = money.replace(',', '') * 100
      const wxMoney = (deductionsMoney ? money - parseInt(deductionsMoney * 100) : money) * 0.006
      return wxMoney > 100 ? wxMoney : 100
    }
  },
  created() {
    this.queryBankCard()
  },
  methods: {
    queryBankCard() {
      const { dispatcherId } = this.initData
      this.$api.vehicle
        .fetch('queryDispatcherBankCard', {
          dispatcherId
        })
        .then(res => {
          const { dispatcherName, openBank, bankCardNo, bankName } = res
          this.bankInfo = {
            dispatcherName,
            openBank,
            bankCardNo,
            bankName
          }
        })
    }
  }
}
</script>

<style lang="less" scoped>
.form {
  .form-item {
    width: 100%;
    margin-bottom: 0px;
  }
  .form-select {
    width: 50%;
  }
}
</style>
